import 'package:flutter/material.dart';
import 'package:flutter_douban/config/app_colors.dart';
import 'package:flutter_douban/main_page/home/detail/page/topic_detail_page.dart';
import 'package:flutter_douban/main_page/home/detail/page/topic_list_page.dart';
import 'package:flutter_douban/model/topic_model.dart';

class TopicView extends StatefulWidget {
  final List<TopicModel> topicFirstList;
  final List<TopicModel> topicTwoList;

  const TopicView(
      {Key? key, required this.topicFirstList, required this.topicTwoList})
      : super(key: key);

  @override
  _TopicViewState createState() => _TopicViewState();
}

class _TopicViewState extends State<TopicView> {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      height: 110,
      child: ListView(
        padding: EdgeInsets.all(5),
        scrollDirection: Axis.horizontal,
        children: [
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              _tagWidget(widget.topicFirstList),
              SizedBox(
                height: 6,
              ),
              _tagWidget(widget.topicTwoList),
            ],
          )
        ],
      ),
    );
  }

  Widget _tagWidget(List<TopicModel> list) {
    return Wrap(
      alignment: WrapAlignment.start,
      spacing: 0, //主轴上子控件的间距
      runSpacing: 10, //交叉轴上子控件之间的间距
      children: list
          .map(
            (tag) => InkWell(
              onTap: () {
                /// 跳转 热门列表
                if (tag.name! == '查看更多') {
                  Navigator.of(context).push(MaterialPageRoute(builder: (_) {
                    return TopicListPage();
                  }));
                }else{
                  Navigator.of(context).push(MaterialPageRoute(builder: (_) {
                    return TopicDetailPage(id: int.parse(tag.id.toString()),);
                  }));
                }
              },
              child: Container(
                padding: EdgeInsets.symmetric(vertical: 8, horizontal: 10),
                margin: EdgeInsets.symmetric(vertical: 5, horizontal: 6),
                decoration: BoxDecoration(
                  color: Color.fromRGBO(240, 251, 252, 1),
                  borderRadius: BorderRadius.all(Radius.circular(40)),
                  border: Border.all(
                      width: 1,
                      color: tag.name! == '查看更多'
                          ? Color.fromRGBO(94, 146, 140, 1)
                          : Colors.transparent),
                ),
                child: Text(
                  '# ' + tag.name!,
                  style: TextStyle(
                      fontWeight: FontWeight.w400,
                      fontSize: 13,
                      color: Color.fromRGBO(94, 146, 140, 1)),
                ),
              ),
            ),
          )
          .toList(),
    );
  }
}
